<template>
    <div class="wrap">
        <div class="head">
            <div class="back" @click="util.comBack" >
                <img src="../../../assets/images/X.png">
            </div>
            <div class="title">推荐详情</div>
        </div>
        <div class="block"></div>
        <div class="goods">
            <div class="good_top">
                <div class="good_top-avatar">
                    <img :src="tour.image" class="avatar">
                </div>
                <div class="good_top-info">
                    <div class="username">{{tour.username}}</div>
                    <div class="ta">{{tour.tour_time}}</div>
                </div>
                <div class="good_top-price">
                    <div class="price">{{tour.tour_title}}</div>
                </div>
            </div>
            <div class="good_desc">
                <p class="desc">{{tour.tour_content}}</p>
            </div>
            <div class="good_img">
                <img :src="tour.tour_picture" alt="">
            </div>
        </div>
      <div class="messagebox">
        <p class="msg">评论</p>

        <div v-for="item of comment" :key="item.comment_id">
          <div class="conment" v-if="item.text == ' '">
            <img src="../../../assets/images/X.png" alt="" class="bg">
            <p class="nomsg">还没有人评论，还不快来抢沙发</p>
          </div>

          <div class="conment"  v-else>
            <div class="item">
              <img class="item-img" :src="item.image">
              <span class="name">{{item.username}}</span>
            </div>
            <p class="time">{{item.time}}</p>
            <p class="text">{{item.text}}</p>
          </div>
        </div>
      </div>


      <div v-show="isAdd">
        <div>
          <label class="form-group">评论内容：</label>
          <textarea class="form-control" v-model="comments" placeholder="请留下你的精彩评论吧"></textarea>
        </div>
        <div class="form-group">
          <div class="iconfont btn-primary" @click="add">&#xe61d;</div>
        </div>
      </div>


      <div class="block"></div>



      <div class="fixedbottom">
        <div class="message" v-if="msg">
          <div class="iconfont backicon">&#xe83f;</div>
          <span class="leabmsg" @click="toggleAdd">{{isAdd ? '关闭' : '评论'}}</span>
        </div>

            <div class="givestar">
                <img src="../../../assets/images/X.png" alt="" v-if="show">
                <img src="../../../assets/images/X.png" alt="" v-else>
                <span class="star">点赞</span>
            </div>
            <div class="buy">加入心愿单</div>
        </div>
    </div>
</template>
<script>
    import {mapGetters,mapActions} from 'vuex'
    import axios from 'axios'
    export default {
        // props: ['wear'],
        name: "ToursDetail",
        props: {
            comment: Array
        },
        inject: ['reload'],
        data() {
            return {
                news: '',
                message: '',
                show: true,
                isLogin: '',
                isAdd: false,
                list: [],
                comments: '',
                tour: []
            }
        },
        mounted() {
            axios.get('/api/tour/detail/id/' + this.$route.params.id)
                .then((res) => {
                    console.log(res)
                    this.tour = res.data.data;
                })
                .catch((err) => {
                    console.log(err);
                });

        },
        methods: {
            toggleAdd() {
                this.isAdd = !this.isAdd;
            },
            add(){
                let gid = this.$route.params && this.$route.params.id;
                let uid = this.$session.get('user_id')
                console.log(uid)
                let nowDate = new Date();
                let date = {
                    year: nowDate.getFullYear(),
                    month: nowDate.getMonth() + 1,
                    date: nowDate.getDate(),
                    hours: nowDate.getHours(),
                    min: nowDate.getMinutes(),
                    second: nowDate.getSeconds()
                }
                let commentDate = date.year + '-' + 0 + date.month + '-' + date.date + ' '+ date.hours + ':' + date.min + ':' + date.second;

                axios.get('api/user/index.html').then((response)=> {
                    let res = response.data.data;
                    console.log(res)
                    this.list = res.filter((res) => {
                        return res.user_id == uid;
                    });
                    let name = this.list[0]['username']
                    let pic = this.list[0]['image']
                    let params ={
                        text: this.comments,
                        time: commentDate,
                        user_id: uid,
                        tour_id: gid,
                        username: name,
                        image: pic
                    }

                    axios.post('/api/tourcomment/addcomment.html',params)
                        .then((res) => {
                            this.comment.push(res.data.data);
                            this.text = '';
                            this.time = '';
                            this.user_id= '';
                            this.tour_id = '';
                            this.username = '';
                            this.image = '';
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                    this.reload()
                })

            },
            msg() {
            },
            star() {
                this.show = !this.show
                // console.log(this.show)
                // this.$store.dispatch('setShow', this.show)
                // if(this.show) {
                // 	this.$store.dispatch('cutLikenum')

                // }else {
                // 	this.$store.dispatch('setLikenum')
                // }
            },
            // buy() {
            //     if (this.isLogin) {
            //         this.$router.push({path: '/chat'})
            //     } else {
            //         this.$router.push({path: '/login'})
            //     }
            // }
        }
    }
</script>
<style lang="css" scoped>
    .bg{
        width: 50px;
        height: 50px;
    }
    .wrap {
        width: 100%;
        height: 100%;
        background-color: #f7f7f7;
    }
    .head {
        width: 100%;
        height: 50px;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        background-color: #f7f7f7;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    .form-control{

    }
    .form-group{
      font-size: 17px;
      font-weight: 700;
    }
    .btn-primary{
      margin-top: -41px;
      margin-left: 258px;
    }
    .leabmsg{
      margin-top: 27px;
    }
    .backicon {
      width: 0.4rem;
      height: 0.4rem;
      margin-top: -6px;
      margin-left: 3px;
    }
    .name{
      font-weight: 600;
      font-size: 17px;
      color: grey;
      position: relative;
      left: 10px;
      top: -4px;
    }
    .text{
      font-size: 16px;
      margin-top: -41px;
      margin-left: 144px;
    }
    .time{
      font-size: 15px;
      margin-top: 11px;
      margin-left: -214px;
    }
    .item-img{
      width: 40px;
      height: 40px;
      margin-left: -177px;
      border-radius: 50%;
      margin-top: 5px;
    }
    .back img{
        width: 25px;
        height: 25px;
    }
    .title {
        flex: 1;
        text-align: center;
        font-size: 15px;
        font-weight: 700;
    }
    .block{
        height: 50px;
    }
    .goods {
        width: 100%;
        min-height: 100%;
        padding: 20px 10px;
        box-sizing: border-box;
        background-color: #fff;
    }
    .good_top {
        width: 100%;
        height: 1rem;
        display: -webkit-flex;
        display: flex;
        align-items: center;
    }
    .good_top-avatar {
        width: 1rem;
        height: 1rem;
    }
    .good_top-avatar .avatar {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
    }
    .good_top-info {
        margin-left: 10px;
        flex: 1;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
    }
    .good_top-info .username {
        color: #000;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: .3rem;
    }
    .good_top-info .ta {
        color: #777;
        font-size: 12px;
    }
    .good_top-price .price{
        color: red;
        font-size: 15px;
    }
    .good_desc {
        width: 100%;
    }
    .desc {
        font-size: 15px;
        color: #000;
        line-height: 20px;
        margin-top: 25px;
    }
    .good_img {
        width: 100%;
        margin-top: 15px;
    }
    .good_img img {
        width: 100%;
    }
    .messagebox {
        margin-top: 10px;
        background-color: #fff;
        padding: 20px 10px;
    }
    .messagebox .msg {
        font-size: 17px;
        color: #000;
        font-weight: 600;
        height: 0;
        line-height: 0;
        border-bottom: 1px solid #f8f8f8;
        /*margin-left: .2rem;*/
    }
    .msg:before {
        content: "";
        display: inline-block;
        width: 5px;
        height: 20px;
        background-color: #ffda44;
        margin-right: 5px;
        vertical-align: baseline;
    }
    .conment {
        width: 100%;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30px 0;
    }
    .conment .nomsg {
        margin-top: .6rem;
        font-size: 15px;
        color: #888;
    }
    .fixedbottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 1rem;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        background-color: #f8f8f8;
        z-index: 100;
        box-sizing: border-box;
    }
    .message,.givestar,.buy{
        display: -webkit-flex;
        display: flex;
        flex-direction: column;

    }
    .message {
        flex: 1;
        align-items: center;
    }
    .message img, .givestar img{
        width: 0.4rem;
        height: 0.4rem;
    }
    .givestar {
        flex: 2;
    }
    .buy {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #d81e06;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        color: #fff;
        font-size: 15px;
    }
</style>
